import React, { useState, useMemo, useEffect } from 'react';
 
 
export default function WithoutMemo() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('');
    console.log('count', count);
    // function expensive() {
    //     console.log('compute');
    //     let sum = 0;
    //     for (let i = 0; i < count * 100; i++) {
    //         sum += i;
    //     }
    //     return sum;
    // }
    const expensive = useMemo(() => {
        console.log('compute', count);
        let sum = 0;
        for (let i = 0; i < count * 100; i++) {
            sum += i;
        }
        console.log('compute sum', sum);
        return sum;
    }, [count]);

    console.log('count2', count);

    useEffect(() => {
        console.log('useEffect', count);
    }, [count])

    return <div>
        <h4>{count}-{val}-{expensive}</h4>
        <h4>{count}-{val}</h4>
        <div>
            <button onClick={() => setCount(count + 1)}>+c1</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </div>
    </div>;

}